<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:Layout的左侧菜单组件
* @fileName:AsideMenu.vue
* @author:zoujunjie
* @date:2022-4-8
!-->
<template>
  <el-menu
    background-color="transparent"
    active-text-color="white"
    text-color="white"
    :default-openeds="getAllKeys()"
    :default-active="getMenuListItemByPath(menus, $route.path)?.key"
  >
    <el-sub-menu v-for="menu in menus" :key="menu.key" :index="menu.key">
      <template #title>
        <el-image
          class="el-icon"
          v-if="menu.icon"
          :src="menu.icon"
          fit="contain"
        ></el-image>
        <span>{{ menu.text }}</span>
      </template>
      <template v-for="subMenu in menu.children" :key="subMenu.key">
        <el-sub-menu
          v-if="subMenu.children && subMenu.children.length > 0"
          :index="subMenu.key"
        >
          <template #title>
            <el-image
              class="el-icon"
              v-if="subMenu.icon"
              :src="subMenu.icon"
              fit="contain"
            ></el-image>
            <span>{{ subMenu.text }}</span>
          </template>
          <el-menu-item
            v-for="item in subMenu.children"
            :key="item.key"
            :index="item.key"
            class="child-2"
            @click="onMenuItemClick(item)"
          >
            <span>{{ item.text }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item
          v-else
          class="child-1"
          :index="subMenu.key"
          @click="onMenuItemClick(subMenu)"
        >
          <el-image
            class="el-icon"
            v-if="subMenu.icon"
            :src="subMenu.icon"
            fit="contain"
          ></el-image>
          <span>{{ subMenu.text }}</span>
        </el-menu-item>
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import {
  adminUserMenus,
  getAllKeys,
  IMenuItem,
  getOrganizationUserMenus,
  getMenuListItemByPath,
} from "@/common/menu";
import { computed, onMounted, Ref, ref } from "vue";
import { getMenuPermissions } from "@/services/user-permission";

const router = useRouter();
let orgMenus: Ref<IMenuItem[]> = ref([]);

const menus = computed((): IMenuItem[] => {
  if (useRoute().path.toLowerCase().startsWith("/admin")) {
    return adminUserMenus;
  }
  return orgMenus.value;
});

const onMenuItemClick = (menu: IMenuItem): void => {
  if (menu && menu.path) {
    router.push(menu.path + "");
  }
};

onMounted(() => {
  getMenuPermissions().then((menuKeyPremissions) => {
    orgMenus.value = getOrganizationUserMenus(menuKeyPremissions);
  });
});
</script>

<style lang="scss" scoped>
.el-menu {
  border: 0;
}
.el-menu-item {
  opacity: 0.5;
}
.el-sub-menu__title {
  opacity: 0.5;
}
.el-menu-item:hover {
  background: none;
}
.el-menu-item.is-active {
  opacity: 1;
}

.el-menu-item.is-active.child-1 {
  background-color: var(--el-color-primary);
}

.el-menu-item.is-active.child-2 {
  border-left-color: var(--el-color-primary);
  background-image: linear-gradient(
    90deg,
    rgba(84, 115, 230, 0) 0%,
    var(--el-color-primary) 100%
  );
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: right;
}
.child-2 {
  height: 36px;
  margin-left: 10px;
  border-left: 3px solid transparent;
  padding-left: 70px !important;
}
.el-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>
